<style scoped lang="stylus" type="text/stylus">
  @import 'group.styl';
</style>

<template>
  <div id="NoticeGroup">
    <header>
      <ul>
        <li>
          <router-link to="/platformManagement/notification">通知</router-link>
        </li>
        <li>/</li>
        <li>通知群组管理</li>
      </ul>
    </header>
    <div class="groupPage">
      <VuePerfectScrollbar class="groupContentAside">
        <aside>
          <div :class="{'checkedActive':isChoosed01}" class="checkAll" @click="getAllCompanyList">
            <span>查看全部企业</span>
          </div>
          <div class="checkgroup">
            <span class="groupTitle">查看群组</span>
            <ul>
              <li @click="getTargetGroupToCompany(groupList.id,groupList.groupName)" v-for="groupList in allGroupList"
                  :key="groupList.id" :class='{"checkedActive01":classId==groupList.id}'>
                <p v-show="isOldTitle">
                            <span class="oldTitle">
                              {{groupList.groupName}}&nbsp;
                            </span>
                  <span class="editGroupName" @click.stop="editGroup(groupList.id)" v-show="classId==groupList.id">
                              <Icon type="edit"></Icon>
                            </span>
                </p>
                <!-- 当前群组的标题 -->
                <input class="targetGroupTitle" v-model="newGroupName" autofocus
                       v-show="isNewTitle && classId==groupList.id" @click.stop @blur="editGroupTitle(groupList.id)"
                       @keyup.enter="editGroupTitle(groupList.id)" type="text" :placeholder="groupList.groupName">
                <!-- 点击后可编辑群组标题 -->
                <!-- <span class="editGroupName" @click.stop="editGroup(groupList.id)" v-show="classId==groupList.id">
                  <Icon type="edit"></Icon>
                </span> -->
                <!-- 群组删除按钮 -->
                <span @click.stop="delGroup(groupList.id)" v-show="classId==groupList.id" class="delBtn"><Icon
                  type="close-round"></Icon></span>
                <!-- 上下移动位置按钮 -->
                <div v-show="classId==groupList.id" class="btnLeft">
                  <span class="btnUp"><Icon type="arrow-up-b"></Icon></span>
                  <span class="BtnDown"><Icon type="arrow-down-b"></Icon></span>
                </div>
                <span class="companyTotalCount" :class="{groupStatus:groupList.titlehint == '尚未加入企业'}">
                            {{groupList.titlehint}}
                          </span>
              </li>
            </ul>
            <div class="addGroupInfo" v-show="isAddGroup">
              <input type="text" autofocus placeholder="请输入群组名" @blur="addGroupList" @keyup.enter="addGroupList"
                     ref="groupNameInfo">
              <span>新建群组</span>
            </div>
          </div>
          <div @click="addGroupBtn" class="meetingNotice">+ 新群组</div>
        </aside>
      </VuePerfectScrollbar>

      <article>
        <!-- 右侧筛选器、搜索区 -->
        <div class="groupListTitle">
          <div v-show="isGroupNumUp" class="titleListLeft">
            <div :class="{'groupsNum':true, 'activeTitleStyle':isGroupNumUp}" @click="filtrate('gd')">
              <span>群组数量&nbsp;&nbsp;&nbsp;↓</span>
              <span></span>
            </div>
            <div :class="{'loginTime':true}" @click="filtrate('tu')">
              <span>注册时间</span>
              <span></span>
            </div>
          </div>
          <div v-show="isGroupNumDown" class="titleListLeft">
            <div :class="{'groupsNum':true, 'activeTitleStyle':isGroupNumDown}" @click="filtrate('gu')">
              <span>群组数量&nbsp;&nbsp;&nbsp;↑</span>
              <span></span>
            </div>
            <div :class="{'loginTime':true}" @click="filtrate('tu')">
              <span>注册时间</span>
              <span></span>
            </div>
          </div>
          <div v-show="isLoginTimeUp" class="titleListLeft">
            <div :class="{'groupsNum':true}" @click="filtrate('gu')">
              <span>群组数量</span>
              <span></span>
            </div>
            <div :class="{'loginTime':true, 'activeTitleStyle':isLoginTimeUp}" @click="filtrate('td')">
              <span>注册时间&nbsp;&nbsp;&nbsp;↓</span>
              <span></span>
            </div>
          </div>
          <div v-show="isLoginTimeDown" class="titleListLeft">
            <div :class="{'groupsNum':true}" @click="filtrate('gd')">
              <span>群组数量</span>
              <span></span>
            </div>
            <div :class="{'loginTime':true, 'activeTitleStyle':isLoginTimeDown}" @click="filtrate('tu')">
              <span>注册时间&nbsp;&nbsp;&nbsp;↑</span>
              <span></span>
            </div>
          </div>
          <div class="titleListRight">
            <input v-model="searchValue" @keyup.enter="searchKeywordsToCompany" v-if="isChoosed01" type="text"
                   placeholder="从全部企业中搜索企业">
            <input v-model="searchValue" v-if="!isChoosed01" type="text" :placeholder="'从“ '+theGroupName+' ”中搜索企业'">
            <span @click="searchKeywordsToCompany" class="searchBtn">
                      <Icon type="search"></Icon>
                    </span>
          </div>
        </div>
        <div v-show="isChoosed01 && searchValue == ''" class="groupListName">企业名单</div>
        <div v-show="isChoosed01 &&  searchValue != '' && theGroupName == ''" class="groupListName">
          “{{searchValue}}”的搜索结果（范围：全部企业）
        </div>
        <div v-show="isChoosed01 == false &&  searchValue == '' && theGroupName != ''" class="groupListName">
          {{theGroupName}}
        </div>
        <div v-show="isChoosed01 == false &&  searchValue != '' && theGroupName != ''" class="groupListName">
          “{{searchValue}}”的搜索结果（范围：“{{theGroupName}}”）
        </div>
        <div class="groupListInfoView">
          <ul class="groupListInfo">
            <VuePerfectScrollbar class="groupContentInfo">
              <li v-for="item in allCompanyList" :key="item.companyId">
                <div class="notificationContent">
                  <h2>{{item.companyName}}</h2>
                  <span>账号注册于：{{item.createDate}}（{{item.createDateHint}}）</span>
                  <!-- <div class="centerContent">
                    <span>暂无详细信息</span>
                      <div class="center-left">
                          <p>行业：电池/新能源/汽车制造</p>
                          <span>主营产品：IT，汽车，新能源：电池，包括镍镉电池，锂电池，铁电池等；手机代工；笔记本代工；传统燃油汽车，油电混合动力车，纯电动汽车；LED照明，太阳能，储能电站。</span>
                      </div>
                      <div class="center-right">
                          <p>总资产：<span>531,000万</span></p>
                          <p>过去2年纳税：<span>3,143万</span></p>
                          <p>规模：<span>1,327人</span></p>
                          <p>过去两年获政府资助：<span>3,189万</span></p>
                      </div>
                  </div> -->
                  <div class="groupList">
                    <ul>
                      <li ref="targetGroupName" v-for="(groupInfo,index) in item.ships" :key="index"
                          :class="{'isTargetGroup':groupInfo.selectGroup == true}">
                        {{groupInfo.groupName}}
                        <span @click="delIsAddGroup(item.companyId,groupInfo.groupId)" class="deleteBtn"><Icon
                          type="ios-close-empty"></Icon></span>
                      </li>
                      <li class="addNewGroup" @click="isShowModal(item.companyId)">+ 加入新群组</li>
                    </ul>
                    <div class="addNewGroupModal" v-if="modal1 && item.companyId == targetId">
                      <div class="addNewGroupModalBottomTop">选择需要加入的群组:</div>
                      <div class="addNewGroupModalBottomBottom">
                        <span @click="chooseTargetGroup(notAddGroup.id)" v-for="notAddGroup in noAddToGroupList"
                              :key="notAddGroup.id" :class='{"checkedActive03":classId01==notAddGroup.id}'>{{notAddGroup.groupName}}</span>
                      </div>
                    </div>
                    <ButtonGroup v-if="modal1 && item.companyId == targetId" size="small">
                      <Button @click="isAdd(item.companyId)" type="ghost">确认</Button>
                      <Button @click="notAdd" type="ghost">取消</Button>
                    </ButtonGroup>
                  </div>
                </div>
              </li>
              <div class="notContent" v-show="allCompanyList.length == 0">
                <i class="icon iconfont icon-zanwuneirong"></i>
                <div class="name">暂无内容</div>
              </div>
            </VuePerfectScrollbar>
          </ul>
        </div>
      </article>
    </div>
  </div>
</template>

<script>

  export default {
    name      : "Group",
    data() {
      return {
        // 群组信息
        allGroupList    : {},
        // 企业列表
        allCompanyList  : [],
        // 当前企业未添加的群组
        noAddToGroupList: [],

        // 新建群组
        isAddGroup  : false,
        // 群组名只读
        readonly    : true,
        // 群组名字
        groupName   : "",
        // 新群组名字
        newGroupName: "",
        // 显示当前群组名字
        isOldTitle  : true,
        isNewTitle  : false,

        groupId       : "",
        targetId      : "",
        classId       : null,
        classId01     : null,
        theGroupName  : "",
        // 需要添加的群组id
        needAddGroupId: "",

        // 添加新群组模态框
        modal1     : false,
        // 搜索内容
        searchValue: "",
        // 筛选过滤
        order      : null,
        orderAsc   : null,

        isGroupNumUp   : true,
        isGroupNumDown : false,
        isLoginTimeUp  : false,
        isLoginTimeDown: false,
        isChoosed01    : true,
        isChoosed02    : false
      };
    },
    mounted() {
      this.getAllGroupList();
      this.getAllCompanyList();
    },
    methods   : {
      //获取全部群组
      getAllGroupList() {
        this.ajaxData(
          {
            type: "get",
            url : "/companygroup/getAllCompanyGroup",
            data: {
              page    : 1,
              pageSize: 1000
            }
          },
          (res, all) => {
            this.allGroupList = res;
          }
        );
      },
      //删除当前群组
      delGroup(id) {
        this.groupId = id;
        let a        = confirm("确定删除该群组吗？");
        if (a == true) {
          this.ajaxData(
            {
              type: "get",
              url : "/companygroup/deleteGroup",
              data: {groupId: this.groupId}
            },
            (res, all) => {
              this.$Message.info("删除成功！");
              window.location.reload();
            }
          );
        } else {
          this.$Message.info("取消删除！");
        }
      },
      //编辑当前群组
      editGroup(id) {
        this.isNewTitle = true;
      },
      //完成编辑后修改群组名
      editGroupTitle(id) {
        this.groupId = id;
        if (this.newGroupName == "") {
          this.$Message.error("请输入需要编辑的群组名！");
        }
        if (this.newGroupName != "") {
          this.ajaxData(
            {
              type: "get",
              url : "/companygroup/updateGroupName",
              data: {
                groupId: this.groupId,
                value  : this.newGroupName
              }
            },
            res => {
              window.location.reload();
            }
          );
        }
      },
      //获取全部企业
      getAllCompanyList() {
        this.searchValue     = "";
        this.isGroupNumUp    = true;
        this.isGroupNumDown  = false;
        this.isLoginTimeUp   = false;
        this.isLoginTimeDown = false;
        this.isChoosed01     = true;
        this.searchValue     = "";
        this.classId         = null;
        this.ajaxData(
          {
            type: "get",
            url : "/companygroup/findAllCompanyToGroup",
            data: {
              value   : "",
              order   : "groupCount",
              orderAsc: true,
              page    : 0,
              pageSize: 500
            }
          },
          (res, all) => {
            this.allCompanyList = res;
          }
        );
      },
      //企业筛选过滤
      filtrate(str) {
        if (str == "gd") {
          this.isGroupNumUp    = false;
          this.isGroupNumDown  = true;
          this.isLoginTimeUp   = false;
          this.isLoginTimeDown = false;
          this.order           = "groupCount";
          this.orderAsc        = false;
        } else if (str == "gu") {
          this.isGroupNumUp    = true;
          this.isGroupNumDown  = false;
          this.isLoginTimeUp   = false;
          this.isLoginTimeDown = false;
          this.order           = "groupCount";
          this.orderAsc        = true;
        } else if (str == "tu") {
          this.isGroupNumUp    = false;
          this.isGroupNumDown  = false;
          this.isLoginTimeUp   = true;
          this.isLoginTimeDown = false;
          this.order           = "date";
          this.orderAsc        = true;
        } else if (str == "td") {
          this.isGroupNumUp    = false;
          this.isGroupNumDown  = false;
          this.isLoginTimeUp   = false;
          this.isLoginTimeDown = true;
          this.order           = "date";
          this.orderAsc        = false;
        }
        this.ajaxData(
          {
            type: "get",
            url : "/companygroup/searchCompany",
            data: {
              value   : "",
              groupId : this.groupId ? this.groupId : "",
              order   : this.order,
              orderAsc: this.orderAsc,
              page    : 0,
              pageSize: 500
            }
          },
          res => {
            this.allCompanyList = res;
          }
        );
      },
      //新增群组
      addGroupBtn() {
        this.isAddGroup = true;
      },
      //删除当前已加入的群组
      delIsAddGroup(companyId, groupId) {
        this.companyId = companyId;
        this.groupId   = groupId;
        let b          = confirm("确定删除该群组吗？");
        if (b == true) {
          this.ajaxData(
            {
              type: "get",
              url : "/companygroup/deleteCompanyToGroup",
              data: {
                groupId  : this.groupId,
                companyId: this.companyId
              }
            },
            (res, all) => {
              this.$Message.info("删除成功！");
              window.location.reload();
            }
          );
        } else {
          this.$Message.info("取消删除！");
        }
      },
      //失去焦点确认添加群组
      addGroupList() {
        this.groupName = this.$refs.groupNameInfo.value;
        if (this.groupName == "") {
          this.$Message.error("请输入需要新建的群组名！");
        } else {
          this.ajaxData(
            {
              type: "get",
              url : "/companygroup/submitcompanygroup",
              data: {
                groupName: this.groupName
              }
            },
            (res, all) => {
              this.addGroup   = res;
              this.isAddGroup = false;
              window.location.reload();
            }
          );
        }
      },
      //点击当前群组获取企业信息
      getTargetGroupToCompany(id, name) {
        this.searchValue     = "";
        this.isGroupNumUp    = true;
        this.isGroupNumDown  = false;
        this.isLoginTimeUp   = false;
        this.isLoginTimeDown = false;
        this.isChoosed02     = true;
        this.theGroupName    = name;
        this.isChoosed01 = false;
        this.classId     = id;
        this.groupId     = id;
        this.ajaxData(
          {
            type: "get",
            url : "/companygroup/findGroupToCompany",
            data: {groupId: this.groupId}
          },
          (res, all) => {
            this.allCompanyList = res;
          }
        );
      },
      //弹出群组选择界面
      isShowModal(id) {
        this.targetId = id;
        this.modal1   = true;
        this.ajaxData(
          {
            type: "get",
            url : "/companygroup/findCompanyNoAddToGroup",
            data: {companyId: this.targetId}
          },
          (res, all) => {
            this.noAddToGroupList = res;
          }
        );
      },
      //选择需要添加的群组
      chooseTargetGroup(id) {
        this.classId01      = id;
        this.needAddGroupId = id;
      },
      //确认添加新群组
      isAdd(id) {
        this.modal1 = false;
        // this.$Message.info("添加新群组成功！");
        this.companyId = id;
        if(this.needAddGroupId == ''){
          this.$Notice.error({
              desc: "请添加要加入的群组"
            });
            return
        }
        this.ajaxData(
          {
            type: "get",
            url : "/companygroup/addCompanyToGroup",
            data: {
              groupId  : this.needAddGroupId,
              companyId: this.companyId
            }
          },
          (res, all) => {
            this.addGroup = res;
            window.location.reload();
          }
        );
      },
      //取消添加新群组
      notAdd() {
        this.modal1 = false;
        this.$Message.info("取消添加新群组！");
      },
      //搜索按钮功能
      searchKeywordsToCompany() {
        if (this.searchValue == "") {
          this.$Message.error("请输入搜索内容！");
        }
        if (this.isChoosed01) {
          this.ajaxData(
            {
              type: "get",
              url : "/companygroup/findAllCompanyToGroup",
              data: {
                value   : this.searchValue,
                order   : "groupCount",
                orderAsc: true,
                page    : 0,
                pageSize: 500
              }
            },
            res => {
              this.allCompanyList = res;
            }
          );
        }
        if (this.isChoosed01 == false) {
          this.ajaxData(
            {
              type: "get",
              url : "/companygroup/searchCompany",
              data: {
                value   : this.searchValue,
                groupId : this.groupId,
                order   : "groupCount",
                orderAsc: true,
                page    : 0,
                pageSize: 500
              }
            },
            res => {
              this.allCompanyList = res;
            }
          );
        }
      }
    }
  };
</script>
